<template>
	<view>
		<uni-popup ref="popup" :safe-area="false"  :style="{zIndex: props.zIndex}">
			<view class="bottom-popup">
				<view class="popup-title d-flex psr a-center j-center">
					<view class="title-text">{{props.title}}</view>
					<image @tap="close" class="title-icon" src="@/static/image/close.png"></image>
				</view>
				<view class="popup-row">
					<picker-view :indicator-style="`height:${itemHeight}px;z-index: 0;`" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item integer-row" :style="{height:itemHeight+'px'}" v-for="(item,index) in integers" :key="index">
								<text class="text" :style="`${value[0]==index?select:noSelect}`">{{item}}</text>
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item decimal-row" :style="{height:itemHeight+'px'}" v-for="(item,index) in decimals" :key="index">
								<text class="text" :style="`${value[1]==index?select:noSelect}`">{{item}}kg</text>
							</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="popup-button d-flex a-center j-center">
					<tm-button _style="font-weight: 600;" round="5" :width="650" :shadow="-1"
					    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="determine"
					    label="确定"></tm-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";

interface Props {
	title?:string,
	initialVlue?:string
	zIndex?:number
}
const props = withDefaults(defineProps<Props>(), {
	title: "体重选择",
	initialVlue:"60.0",
	zIndex:500,
})
const itemHeight = ref(uni.upx2px(70));
const select =`font-size: 40rpx;color:#1DC691;`
const noSelect =`font-size: 30rpx;color:#333333;`

const integers:any = ref([])
const decimals:any = ref([])
//初始化选择组件
for (let i = 0; i <= 120; i++) {
	integers.value.push(30 + i)
}
for (let i = 0; i <= 9; i++) {
	decimals.value.push("." + i)
}
const popup = ref()
const open = () => {
	popup.value.open("bottom");
	
	//初始默认值
	let integerText = props.initialVlue.split(".")[0];
	let decimalText = "."+props.initialVlue.split(".")[1];
	
	let integerIndex = integers.value.indexOf(Number(integerText));
	let decimaIndex = decimals.value.indexOf(decimalText);
	
	value.value = [integerIndex,decimaIndex]
}
const close = () => {
	popup.value.close()
}
const value = ref([164])

const bindChange = (e:any) => {
	const val = e.detail.value;
	value.value = val
}
//确定选择并给父页面传值
const emit = defineEmits(["onGetWeight"])
const determine = () => {
	let Weight = Number(integers.value[value.value[0]]+decimals.value[value.value[1]]);
	//console.log(Weight)
	emit("onGetWeight", Weight);
	//close();//关闭
}

defineExpose({
  open,
  close
});
</script>
<style lang="scss" scoped>
.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}
.j-end {
    justify-content: flex-end;
}

.j-around {
    justify-content: space-around;
}

.d-flex d-r {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}
.bottom-popup{
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.popup-title{
			height: 100rpx;
			border-bottom: 1rpx solid #E4E4E4;
			.title-text{
				text-align: center;
			}
			.title-icon{
				position:absolute;
				top:32rpx;
				right: 30rpx;
				
				width: 36rpx;
				height: 36rpx;
			}
		}
		.popup-show{
			justify-content: space-between;
			height: 80rpx;
			padding: 0 30rpx 0 30rpx;
			.show-text{
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.popup-row{
			padding-bottom: 16rpx;
			.picker-view {
				height: 400rpx;
				margin-top: 20rpx;
			}
			.item {
				display: flex;
				flex-direction: row;
				align-items: center;
				.text{
				    font-size: 34rpx;
				    font-weight: 500;
				}
			}
			.integer-row{
				justify-content: flex-end;
				padding-right: 24rpx;
			}
			.decimal-row{
				padding-left: 31rpx;
			}
		}
		.popup-button{
			padding-bottom: 40rpx;
		}
	}
</style>